<template>
    <div>
        {{ msg }}
        {{ parentMsg }}
        <input v-focus type="text" v-model="msg">
        <button v-changeColor="{'myColor': myColor, 'backColor': backColor}" @click="getParentEvent">子组件调用父方法</button>
        <button @click="sendMessageToParent(name)">子组件向父组件传值</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: "this is product son component!",
            name: "kobe",
            myColor: "red",
            backColor: 'yellow'
        };
    },
    props: {
        // 定义接收父组件信息的常量
        parentMsg: String
    },
    methods: {
        getParentEvent: function() {
            // 子组件调用父组件的方法
            this.$emit("childEvent");
        },
        sendMessageToParent: function(name) {
            // 向父组件传递子组件的信息（变量）;
            this.$emit("listenToChildEvent", name);
        },
        childMethod: function() {
            console.log("这是子组件的方法");
        }
    },
    // 自定义指令
    directives: {
        focus: {
            inserted: function(el) {
                el.focus();
            }
        },
        changeColor: {
            bind: function(el, binding, vnode) {
                el.style.color = binding.value.myColor;
                el.style.backgroundColor = binding.value.backColor;
            },
        }
    }
};
</script>
<style scoped>
.back {
    background-color: aqua;
}
</style>
